<script setup lang="ts">
const { avatar, nickname } = storeToRefs(useUserStore())
</script>

<template>
  <a-dropdown>
    <span hover="bg-[var(--hover-color)]" flex items-center h-48px px-12px cursor-pointer class="transition-all-300">
      <a-avatar :src="avatar" mr-8px size="small" />
      <span class="anticon">{{ nickname }}</span>
    </span>
    <template #overlay>
<!--      <a-menu>-->
<!--        <a-menu-item key="0">-->
<!--          <template #icon>-->
<!--            <UserOutlined />-->
<!--          </template>-->
<!--          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">-->
<!--            个人中心-->
<!--          </a>-->
<!--        </a-menu-item>-->
<!--        <a-menu-item key="1">-->
<!--          <template #icon>-->
<!--            <ProfileOutlined />-->
<!--          </template>-->
<!--          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">-->
<!--            个人设置-->
<!--          </a>-->
<!--        </a-menu-item>-->
<!--        <a-menu-divider />-->
<!--        <a-menu-item key="3">-->
<!--          <template #icon>-->
<!--            <LogoutOutlined />-->
<!--          </template>-->
<!--          退出登录-->
<!--        </a-menu-item>-->
<!--      </a-menu>-->
    </template>
  </a-dropdown>
</template>
